<template>
	<el-dialog
		v-loading="state.loading"
		width="99%"
		:close-on-click-modal="false"
		v-model="dialogVisible"
		:title="state.title"
		destroy-on-close
		:before-close="handleClose"
	>
		<div class="print-box" v-if="state.infoData.id">
			<div id="printContent">
				<svg id="barcode"></svg>
				<h2 class="print-title">按单拣货</h2>
				<el-form :model="state.infoData" :label-width="100">
					<el-row>
						<template v-for="(item, index) in state.mainInfoList.filter((i) => i.isChecked)">
							<el-col :span="8" v-if="index === 2"></el-col>
							<el-col :span="8">
								<el-form-item :label="item.label + '：'" :prop="item.value">
									<span v-if="item.value === 'teamName' || item.value === 'companyName'" style="font-weight: 600">
										{{ state.infoData[item.value] || '-' }}
									</span>
									<span v-else-if="item.value === 'nowTime'">
										{{ formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS') }}
									</span>
									<span v-else-if="item.value === 'store'"> {{ state.infoData.storeCode || '-' }} / {{ state.infoData.marketCode || '-' }} </span>
									<span v-else-if="item.value === 'busType'">
										<template v-for="bus in outbound_bus_type">
											{{ bus.value === state.infoData.busType ? bus.label : '' }}
										</template>
									</span>
									<span v-else-if="item.value === 'createBys'">
										{{ state.infoData?.itemList[0] ? state.infoData?.itemList[0].createBy : '' }}
									</span>
									<span v-else>
										{{ state.infoData[item.value] || '-' }}
									</span>
								</el-form-item>
							</el-col>
						</template>
					</el-row>
				</el-form>

				<!--   打印    -->
				<table class="my-table" style="margin: 0 auto; border: 1px solid #dfdfe1; border-collapse: collapse; width: 100%; margin-top: 20px">
					<thead>
						<tr>
							<th style="border: 1px solid #dfdfe1; border-collapse: collapse">序号</th>
							<th style="border: 1px solid #dfdfe1; border-collapse: collapse">图片</th>
							<th style="border: 1px solid #dfdfe1; border-collapse: collapse">产品信息(产品名称/SKU)</th>
							<th style="border: 1px solid #dfdfe1; border-collapse: collapse">备货平台</th>
							<th style="border: 1px solid #dfdfe1; border-collapse: collapse">数量</th>
							<template v-for="th in state.childInfoList">
								<th v-if="th.isChecked" style="border: 1px solid #dfdfe1; border-collapse: collapse">{{ th.label }}</th>
							</template>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(item, i) in state.infoData.itemList" :key="i">
							<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
								{{ ++i }}
							</td>
							<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
								<ewt-image
									v-if="item.picUrl"
									:url="item.picUrl"
									style="width: 36px; height: 36px; object-fit: contain; display: block; cursor: pointer; margin: auto"
								/>
								<div v-else class="non-pic">无图</div>
							</td>
							<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
								<div>{{ item.skuName || '--' }}</div>
								<div>{{ item.skuCode || '--' }}</div>
							</td>
							<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
								{{ item.stockupPlatformName }}
							</td>
							<td style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
								{{ item.pickQty }}
							</td>

							<template v-for="td in state.childInfoList">
								<td v-if="td.isChecked" style="text-align: center; border: 1px solid #dfdfe1; border-collapse: collapse">
									<template v-if="td.value === 'MSKU'">
										<div>{{ item.mskuCode || '--' }}</div>
										<div>{{ item.fnsku || '--' }}</div>
									</template>
									<template v-if="td.value === 'skuAttrs' && item.skuAttrs">
										<div v-for="(it, index) in JSON.parse(item.skuAttrs)" :key="index">{{ it.attrKeyName }} : {{ it.attrValue }}</div>
									</template>
									<template v-else>
										{{ item[td.value] }}
									</template>
								</td>
							</template>
						</tr>
					</tbody>
				</table>
			</div>
			<div class="print-setting">
				<p>打印设置</p>
				<div class="main-settiing">
					<div class="info-tab-title">单据信息设置</div>
					<div class="mainChecks">
						<div v-for="info in state.mainInfoList" :key="info.value">
							<el-checkbox v-model="info.isChecked" :label="info.label"></el-checkbox>
						</div>
					</div>
				</div>
				<div class="child-settiing">
					<div class="info-tab-title">产品信息设置</div>
					<div class="mainChecks">
						<div v-for="info in state.childInfoList" :key="info.value">
							<el-checkbox v-model="info.isChecked" :label="info.label"></el-checkbox>
						</div>
					</div>
				</div>
			</div>
		</div>
		<template #footer>
			<el-button @click="handleClose">取消</el-button>
			<el-button class="ml10" type="primary" @click="toPrint">打印</el-button>
		</template>
	</el-dialog>
</template>
<script setup lang="ts" name="printDialog">
import { getOutboundDetail } from './api.ts';
import { formatDate } from '/@/utils/formatTime';
import { ElMessage } from 'element-plus';
// import { Print } from '../../MyPrint.js';
const { proxy } = getCurrentInstance();

import JsBarcode from 'jsbarcode';
import { useDict } from '/@/hooks/dict';
const { outbound_bus_type } = useDict('outbound_bus_type');
const state = reactive({
	id: '',
	title: '按单打印',
	infoData: { value: '测试测试测试111' },
	checkedObj: {},
	mainInfoList: [
		{ label: '团队', value: 'teamName', isChecked: true },
		{ label: '公司主体', value: 'companyName', isChecked: true },
		{ label: '发货仓库', value: 'whNameFrom', isChecked: true },
		{ label: '业务类型：', value: 'busType', isChecked: true },
		{ label: '拣货员', value: 'createBys', isChecked: true },
		{ label: '备货区域', value: 'stockupAreaName', isChecked: true },
		{ label: '业务单号', value: 'busCode', isChecked: true },
		{ label: '打印时间', value: 'nowTime', isChecked: true },
		{ label: '平台单号', value: 'platformShipCode', isChecked: true },
		{ label: '下单时间', value: 'fbmOrderTime', isChecked: true },
		{ label: '店铺/站点', value: 'store', isChecked: true },
		{ label: '备注', value: 'remarks', isChecked: true },
	],
	childInfoList: [
		{ label: 'MSKU/FNSKU', value: 'MSKU', isChecked: true },
		{ label: '属性', value: 'skuAttrs', isChecked: true },
		{ label: '拣货库位', value: 'positionCode', isChecked: true },
		{ label: '备注', value: 'remarks', isChecked: true },
	],
});
const dialogVisible = ref(false);
// 获取详情
const getDetail = async () => {
	try {
		state.loading = true;
		const { data } = await getOutboundDetail(state.id);
		let dataInit = {};
		dataInit = JSON.parse(JSON.stringify(data));

		dataInit.itemList = [];
		data.itemList.forEach((item) => {
			if (item.pickBatchDtoList.length === 1) {
				let obj = item;
				obj.positionCode = item.pickBatchDtoList[0].positionCode;
				obj.pickQty = item.pickBatchDtoList[0].pickQty;
				dataInit.itemList.push(obj);
			} else if (item.pickBatchDtoList.length > 1) {
				item.pickBatchDtoList.forEach((it) => {
					let obj = item;
					obj.positionCode = it.positionCode;
					obj.pickQty = it.pickQty;
					dataInit.itemList.push(obj);
				});
			}
		});
		state.loading = false;
		state.infoData = JSON.parse(JSON.stringify(dataInit));

		nextTick(() => {
			createBarCode();
		});
	} catch (error) {
		ElMessage({
			message: error.msg,
			type: 'error',
		});
	}
};
// 打开弹窗
const openDialog = (id) => {
	state.id = id;
	dialogVisible.value = true;
	getDetail();
};
const createBarCode = () => {
	JsBarcode('#barcode', state.infoData.outboundCode, {
		background: 'transparent',
		format: 'CODE39',
		width: 1,
		height: 50,
	});
};
// 关闭弹窗
const handleClose = () => {
	dialogVisible.value = false;
};
const toPrint = () => {
	const printContent = document.querySelector('#printContent');
	// Print(printContent);
	proxy.Print(printContent);
};
defineExpose({
	openDialog,
});
</script>
<style scoped  lang="scss">
.print-title {
	font-size: 24px;
	text-align: center;
	color: #222;
}
.print-box {
	display: flex;
	gap: 36px;
	background-color: #f8f8f8;
	height: 74vh;
}
#printContent {
	flex: 1;
	background-color: #fff;
	padding-right: 20px;
	position: relative;
}
#printContent table th,
#printContent table td {
	font-size: 12px !important;
}
.print-setting {
	width: 260px;
	background-color: #fff;
	padding: 16px;
}
:deep(.el-form) {
	padding: 20px;
}
:deep(.el-form .el-form-item__label) {
	color: #888;
}
:deep(.el-form .el-form-item__content) {
	color: #222;
}
.el-col {
	margin-bottom: 8px;
}
#barcode {
	position: absolute;
	top: -8px;
	right: 10px;
}
.print-setting > p {
	color: #222;
	font-weight: 600;
}
.print-setting > div {
	margin: 10px;
}
.info-tab-title {
	position: relative;
	height: 24px;
	font-size: 14px;
	line-height: 24px;
	font-weight: 600;
	color: #0b1019;
	padding-left: 10px;
	margin-bottom: 20px;
	display: flex;
	&:before {
		content: ' ';
		display: inline-block;
		position: absolute;
		top: 5px;
		left: 0;
		height: 14px;
		width: 2px;
		background: #005bf5;
	}
}
.mainChecks {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

th,
td {
	padding: 4px 8px;
	font-size: 14px;
}

@media print {
	:deep(.el-form-item__label) {
		font-size: 12px !important;
		color: #888;
	}
	:deep(.el-form-item__content) {
		font-size: 12px !important;
	}
}
</style>
